<div class="default-background">
    <div style="display: flex; justify-content: space-between; margin-top: 16px;">
        <div>
            <div style="font-size: 32px; margin: 8px 0px 16px 0px; font-weight: 700; line-height: 32px;"> {{'MY_ADMIN_DASHBOARD'|translate}}</div>
            <div style="margin: 0px 0px 16px 0px; color: #545968; font-size: 14px;">{{'ADMIN_SUB'|translate}}</div>
        </div>
    </div>
    <div style="display: flex;flex-direction: row;align-items: center;height: 56px; justify-content:space-between;">
        <mat-form-field style="flex: 1;">
            <mat-label>{{'ENTER_USER_EMAIL' | translate}}</mat-label>
            <mat-chip-list #chipList aria-label="chip list selection">
                <mat-chip *ngFor="let e of newAdmins" [selectable]="true" [removable]="true" (removed)="remove(e)">
                    <ng-container>
                        {{e.label|translate}}
                    </ng-container>
                    <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
                </mat-chip>
                <input matInput [value]="email.value" (input)="updateEmail($event)" [matAutocomplete]="auto"
                    [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let e of options" [value]="e.value" (click)="onAutoCompleteClickHandler(e)">
                    {{e.label}}
                </mat-option>
                <mat-option *ngIf="!allLoaded && !loading ">
                    <div #ghostRef>
                        <button mat-menu-item>
                            <mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'" [diameter]="40">
                            </mat-progress-spinner>
                        </button>
                    </div>
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
        <button mat-raised-button color="accent" style="height: 36px; margin-left: 24px;" [disabled]="newAdmins.length===0"
            (click)="doAdd()">{{'ADD_TENANT_ADMIN'|translate}}</button>
        <button mat-raised-button color="primary" style="height: 36px; margin-left: 24px;"
            (click)="doRefresh()">{{'REFRESH'|translate}}</button>
    </div>
    <div >
        <div class="table-container">
            <table mat-table [dataSource]="tableSource.dataSource">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['id']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.id"></app-copy-field>
                    </td>
                </ng-container>
    
                <ng-container matColumnDef="email">
                    <th mat-header-cell *matHeaderCellDef> {{columnList['email']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.email"></app-copy-field>
                    </td>
                </ng-container>
    
                <ng-container matColumnDef="name" sticky>
                    <th mat-header-cell *matHeaderCellDef> {{columnList['name']|translate}} </th>
                    <td mat-cell *matCellDef="let row">
                        <app-copy-field [inputValue]="row.name"></app-copy-field>
                    </td>
                </ng-container>
    
                <ng-container matColumnDef="delete">
                    <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['delete']|translate}}</th>
                    <td mat-cell *matCellDef="let row" class="table-icon">
                        <mat-icon (click)="delete(row.id)" [color]="'warn'">delete_outline</mat-icon>
                    </td>
                </ng-container>
    
                <tr mat-header-row *matHeaderRowDef="tableSource.displayedColumns(); sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: tableSource.displayedColumns();"></tr>
            </table>
        </div>
    
        <mat-paginator [showFirstLastButtons]="true" [length]="tableSource.totoalItemCount" [pageIndex]="tableSource.pageNum"
            [pageSize]="tableSource.pageSize" (page)="tableSource.loadPage($event.pageIndex)">
        </mat-paginator>
    </div>
</div>
